import React, {Component} from 'react'
import {
  View,
  Text,
  StyleSheet, Image
} from 'react-native'
import TabNavigator from 'react-native-tab-navigator'
import PopularPage from './popular-page'

export default class extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 'tb_polular'
    }
  }
  render() {
    return (
      <TabNavigator>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'tb_polular'}
          title="最热"
          selectedTitleStyle={styles.titleStyle}
          renderIcon={() => <Image style={styles.tabIcon} source={require('../../res/images/ic_polular.png')}/>}
          renderSelectedIcon={() => <Image style={[styles.tabIcon, {tintColor: '#2196F3'}]} source={require('../../res/images/ic_polular.png')}/>}
          onPress={() => this.setState({selectedTab: 'tb_polular'})}>
          <PopularPage/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'tb_trending'}
          title="趋势"
          selectedTitleStyle={styles.titleStyle}
          renderIcon={() => <Image style={styles.tabIcon} source={require('../../res/images/ic_trending.png')}/>}
          renderSelectedIcon={() => <Image style={[styles.tabIcon, {tintColor: '#f00'}]} source={require('../../res/images/ic_trending.png')}/>}
          onPress={() => this.setState({selectedTab: 'tb_trending'})}>
          <View style={styles.page2}></View>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'tb_favorite'}
          title="收藏"
          selectedTitleStyle={styles.titleStyle}
          renderIcon={() => <Image style={styles.tabIcon} source={require('../../res/images/ic_favorite.png')}/>}
          renderSelectedIcon={() => <Image style={[styles.tabIcon, {tintColor: '#f00'}]} source={require('../../res/images/ic_favorite.png')}/>}
          onPress={() => this.setState({selectedTab: 'tb_favorite'})}>
          <View style={styles.page1}></View>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'tb_my'}
          title="我的"
          selectedTitleStyle={styles.titleStyle}
          renderIcon={() => <Image style={styles.tabIcon} source={require('../../res/images/ic_my.png')}/>}
          renderSelectedIcon={() => <Image style={[styles.tabIcon, {tintColor: '#f00'}]} source={require('../../res/images/ic_my.png')}/>}
          onPress={() => this.setState({selectedTab: 'tb_my'})}>
          <View style={styles.page2}></View>
        </TabNavigator.Item>
      </TabNavigator>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabIcon: {
    height: 26,
    width: 26
  },
  titleStyle: {
    color: '#2196F3'
  }
})
